<template>
    <div id="mescroll" class="mescroll">
        <div ref="searchBar" :class="['weui-search-bar', 'search-bar-cus']">
            <form ref="formSearch" action="" method="get" class="weui-search-bar__form">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input ref="searchInput" type="search" class="weui-search-bar__input" placeholder="搜索" required="" >
                    <a href="javascript:" class="weui-icon-clear"  ></a>
                </div>
                <label class="weui-search-bar__label" >
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>
            </form>
            <a href="javascript:" class="weui-search-bar__cancel-btn">取消</a>
        </div>

        <div v-cloak class="filterbar-wrap">
            <ul id="filter" class="filterbar">
                <li :class="{'selected': index == selectedIndexMenu}" v-for="(barMenu, index) in barMenus" :key="index" @click="handleShowDialog(barMenu, index)">
                    <div class="filter-label-wrap">
                        <span class="filter-label">{{ barMenu.label }}</span>
                    </div>
                    <span class="filter-value">{{ barMenu.value }}</span>
                </li>
            </ul>

            <div v-show="isShowFilter" class="filterbarpop-wrap">
                <div v-show="index == selectedIndexMenu" class="filterbarpop" v-for="(barMenu, index) in barMenus" :key="index">
                    <ul>
                        <li>暂无数据</li>
                        <!-- <li>全国</li>
                        <li>广西</li>
                        <li>全国</li>
                        <li>广西</li>
                        <li>全国</li>
                        <li>广西</li>
                        <li>全国</li>
                        <li>广西</li>
                        <li>全国</li>
                        <li>广西</li>
                        <li>全国</li>
                        <li>广西</li> -->
                    </ul>
                </div>
            </div>
        </div>

        <div id="dataList" v-cloak class="pro-list">
            <a :href="'/product/' + prod.id + '.html'"  class="pro-item" v-for="(prod, index) in proList" :key="index" >
                <div class="pro-item-hd">
                    <img class="pro-img" :src="'/' + prod.cover_image" alt="">
                </div>
                <div class="pro-item-bd">
                    <div class="pro-name">{{ prod.name }} {{ prod.info }}</div>
                    <div class="pro-info-h">
                        <div class="price">
                            <span class="num">{{ prod.price }}元</span>/{{ prod.unit }}</div>
                        <div class="time">{{ prod.created_at }}</div>
                    </div>
                    <div class="pro-info-b">
                        <div class="pro-address">{{ prod.shop.address }}</div>
                        <div class="pro-uname">{{ prod.shop.name }}</div>
                    </div>
                </div>
            </a>
            <div v-show="isShowFilter" class="pro-filter-mask" @click="handleCloseDialog"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'product-list',
        props: ['type', 'cid'],
        data() {
            return {
                isShowFilter: false,
                searchData: '',
                focusState: false,
                barMenus: [{
                        label: '全国',
                        value: '全国'
                    },
                    {
                        label: '品类',
                        value: '全部'
                    },
                    {
                        label: '筛选',
                        value: '不限'
                    }
                ],
                selectedIndexMenu: undefined,
                proList: []
            }
        },
        created() {
        },
        mounted() {
            var self = this;
            self.mescroll = new MeScroll("mescroll", {
                up: {
                    callback: self.upCallback, //上拉回调
                    isBounce: false,
                    //page:{size:8}, //可配置每页8条数据,默认10
                    toTop: { //配置回到顶部按钮
                        src: "/images/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                    },
                    empty: { //配置列表无任何数据的提示
                        warpId: "dataList",
                        icon: "/images/mescroll-empty.png",
                    },

                }
            });
        },
        methods: {
            handleShowDialog: function(menu, index) {
                this.isShowFilter = true;
                this.selectedIndexMenu = index;
            },
            handleCloseDialog: function() {
                this.isShowFilter = false;
                this.selectedIndexMenu = -1;
            },
            upCallback: function (page) {
                axios.get('/product/list', {
                    params: {
                        page: page.num,
                        size: page.size,
                        type: this.type,
                        cid: this.cid
                    }
                }).then(response => {
                    let curPageData = response.data.data;
                    if (page.num == 1) this.proList = [];
                    this.proList = this.proList.concat(curPageData);
                    this.mescroll.endSuccess(curPageData.length);
                }).catch( err => {
                    console.log(err);
                });
            },
        }
    }

</script>

<style lang="scss" scoped>
    body {
        background-color: #ffffff;
    }

    .mescroll {
        position: fixed;
        top: 0;
        bottom: 0;
        height: auto;
    }
</style>
